<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content='IE=edge' charset="utf-8" />
    <title>F4 Helper</title>
    <style>
        .floatLeft{
            float: left;
        }
        body.sapUiBody
        {
        background-color:transparent;
        }
    </style>
    <script id='sap-ui-bootstrap' type='text/javascript'
            src='../../../ySAPUI5/SAPUI5/resources/sap-ui-core.js'
            data-sap-ui-theme='sap_goldreflection'
            data-sap-ui-libs='sap.ui.table'></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <script>
        //comment this line when done testing
        //$(function(){initialize();});
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            RBItems: 5,
            variable: undefined,
            value: undefined,
            notify: false
        };
        window.onload = function() {
        }
        var checkedItems = new Array();
        var oRBs = new Array();
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            BOI.loadF4Values(properties.variable.name, 1, properties.RBItems, function (data) {
                values  = data.values;
                for (idx in values){
                    oRBs[idx] = new sap.ui.commons.RadioButton('item'+values[idx].name,{
                        text : values[idx].value,
                        tooltip : values[idx].name,
                        select : false,
                        select : function() {
                            checkedItems = [];
                            for (cb in oRBs ){

                            //getChecked()
                                if (oRBs[cb].getSelected())
                                    checkedItems.push(oRBs[cb].getTooltip());
                            }
                            properties.value = checkedItems;
                            if(properties.notify)
                                BOI.Events.raiseEvent(BOI.Events.varchange, [properties.variable.name ,checkedItems]);
                        }
                    }).placeAt('content');
                    if(values[idx] == properties.value)
                        oRBs[idx].setSelected(true);
                    new sap.ui.core.HTML({content:"<br/>"}).placeAt('content');
                }
            });
            //example to set property values to dom elements
            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
            var label = $('#bi_var_name');
            label.html(properties.variable.name);
            label.attr('title', properties.variable.description);
            $('#bi_desc').html(properties.variable.description);
        };
    </script>
</head>
<body class='sapUiBody'>
<div id="bi_var_name"></div>
<p id="bi_desc"></p>
<div id='content'></div>
</body>
</html>